<!DOCTYPE html>
<html>
<head>
    <title>程序分配页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }
      
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        input {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
            color: #333;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>输入需要运行的程序信息</h1>
        <label for="command">命令(多个程序中间用##分割):</label>
        <textarea type="text" id="command" name="command" style="width: 99%;height: 300px;"></textarea><br>
        <label>
            例子:
            <p>
                python main.py 
                    --env_name PandaPush-v3 
                    --env_hook PandaHook 
                    --use_weighted_info_nce 
                    --method RNNSAC 
                    --buffer_size 100000 
                    --encoder_eps_type all 
                    --train_freq 32 
                    --gradient_steps 32 
                    --adversarial_loss_coef 1.0 
                    --learning_rate 1e-4 
                    --contrast_frame_stack 20 
                    --encoder_tau 0.05 
                    --seed 100 
                    --time_step 1_000_000 
                    --test_envs "[(0, 10), (1, 10), (10, 10), (30, 10)]" 
                    --test_eps_num_per_env 50 
                    --use_wandb
                    --train_envs "[(0, 1), (0, 30),(1, 1),(1, 5),(1, 30),(10, 1),(10, 5),(30, 1)]"
            </p>
        </label>
        <label for="command">单个程序所需要内存(GB) 当前为: <span id="rangeValue1">3</span>GB</label>
        <input type="range" id="rangeInput1" name="rangeInput" min="1" max="100" value="3">
        <label for="command">单个程序所需要显存(0.1GB) 当前为: <span id="rangeValue2">1.5</span>GB</label>
        <input type="range" id="rangeInput2" name="rangeInput" min="1" max="100" value="15">
        <input type="submit" value="提交" id="submit">

        <h1>已经提交的程序</h1>
        <label> 剩余分配时间 <span id="assign_progress_span">{{left_assign_time}}</span> 秒 </label>
        <progress value="{{left_assign_time}}" max="60" style="width: 100%;" id="assign_progress"></progress>
        <ul>
            {% for program in running_programs %}
            <li>{{ program.command }}||{{ program.position }}</li>
                <!-- <li>{{ program.command }} (GPU: {{ "是" if program.gpu_required else "否" }})</li> -->
            {% endfor %}
        </ul>
        <input type="submit" value="清空已提交程序" id="clear">

        <h1>服务器信息</h1>
        {% for server in server_infos %}
            <li>
                <strong>{{ server.name }}</strong>
                <p>剩余内存
                    <span>{{ server.mem_stat }} GB</span>
                </p>
                <p>剩余显存
                    {% for gpu_stat in server.gpu_stat %}
                    <span>{{gpu_stat}} GB</span>
                    {% endfor %}
                </p>
                <p>
                    更新时间
                    <span>{{ server.time }}</span>
                </p>
            </li>
        {% endfor %}
    </div>
    <script>
        // 获取按钮元素
        var submit = document.getElementById("submit");
        // 添加点击事件监听器
        submit.addEventListener("click", function() {
            var result = confirm("是否提交执行");
            if (result == true) {
                var url = "/submit";
                // 构建要传入的数据
                var postData = {
                    command: document.getElementById("command").value,
                    mem: document.getElementById("rangeInput1").value,
                    gpu: document.getElementById("rangeInput2").value
                };
                $.post(url,postData, function(data) {
                    // 在请求成功时处理返回的数据
                    document.getElementById("command").value = '';
                    location.reload();
                });
            } else {
                console.log('取消');
                // 用户点击了取消按钮
                // 可做一些处理或者不做任何操作
            }
        });
        var clear = document.getElementById("clear");
        // 添加点击事件监听器
        clear.addEventListener("click", function() {
            var result = confirm("是否清空程序");
            if (result == true) {
                var url = "/clear";
                $.get(url, function(data) {
                    // 在请求成功时处理返回的数据
                    location.reload();
                });
            } else {
                console.log('取消');
                // 用户点击了取消按钮
                // 可做一些处理或者不做任何操作
            }
        });
        var rangeInput1 = document.getElementById("rangeInput1");
        var rangeValue1 = document.getElementById("rangeValue1");

        rangeValue1.innerHTML = rangeInput1.value; // 显示默认值

        // 当滑动条值发生变化时，更新当前选择的值
        rangeInput1.addEventListener("input", function() {
            rangeValue1.innerHTML = rangeInput1.value;
        });

        var rangeInput2 = document.getElementById("rangeInput2");
        var rangeValue2 = document.getElementById("rangeValue2");
        rangeValue2.innerHTML = (parseFloat(rangeInput2.value)/10).toFixed(1); // 显示默认值
        
        // 当滑动条值发生变化时，更新当前选择的值
        rangeInput2.addEventListener("input", function() {
            rangeValue2.innerHTML = (parseFloat(rangeInput2.value)/10).toFixed(1);
        });
        function myFunction() {
            var url = "/left_assign_time";
            $.get(url, function(data) {
                // 在请求成功时处理返回的数据
                var assign_progress = document.getElementById("assign_progress");
                assign_progress.value = data.message;
                assign_progress_span.innerHTML = data.message;
                if (data.message == 59){
                    location.reload();
                }
            });
        }
        
        // 设置间隔为10000毫秒（10秒）
        setInterval(myFunction, 1000);
    </script>
</body>
</html>
